<template>
	<view class="">
		<view class="u-p-t-40">
			<view class="u-m-l-40 u-m-b-10" style="font-weight: bold; font-size: 40rpx; color: #2E2F32;">筛选</view>
			<u-line></u-line>
			<u-form label-position="top">
				<template v-if="level == 1">
					<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" label="总监">
						<u-input
							:value="selectedDirector && selectedDirector.label"
							:selectOpen="showDirectorPicker"
							type="select"
							:border="true"
							placeholder="请选择总监"
							@click="showDirectorPicker = true"
						></u-input>
						<u-select
							:default-value="[directorIndex]"
							mode="single-column"
							label-name="Value"
							value-name="Key"
							@confirm="onPickerChange($event, 'selectedDirector', 'DirectorList')"
							v-model="showDirectorPicker"
							:list="DirectorList"
						></u-select>
					</u-form-item>
					<u-gap :height="10" bg-color="#f5f5f5"></u-gap>
					<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" label="销售经理">
						<u-input
							:value="selectedSalse && selectedSalse.label"
							:selectOpen="showSalsePicker"
							type="select"
							:border="true"
							placeholder="请选择销售经理"
							@click="showSalsePicker = true"
						></u-input>
						<u-select
							:default-value="[salseIndex]"
							@confirm="onPickerChange($event, 'selectedSalse', 'SalseList')"
							v-model="showSalsePicker"
							label-name="Value"
							value-name="Key"
							:list="SalseList"
						></u-select>
					</u-form-item>
					<u-gap :height="10" bg-color="#f5f5f5"></u-gap>
					<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" label="城市经理">
						<u-input
							:value="selectedDealerTerminal && selectedDealerTerminal.label"
							:selectOpen="showDealerTerminalPicker"
							type="select"
							:border="true"
							@click="showDealerTerminalPicker = true"
						>
							请选择城市经理
						</u-input>
						<u-select
							title="城市经理"
							:default-value="[dealerTerminalIndex]"
							@confirm="onPickerChange($event, 'selectedDealerTerminal', 'DealerTerminalList')"
							v-model="showDealerTerminalPicker"
							label-name="Value"
							value-name="Key"
							:list="DealerTerminalList"
						></u-select>
					</u-form-item>
					<u-gap :height="10" bg-color="#f5f5f5"></u-gap>
				</template>
				<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" :label="level == 3 ? '门店名称' : '经销商名称'">
					<u-input @input="onInputChange" :value="DealerName" :border="true" :placeholder="level == 3 ? '请输入门店名称' : '请输入经销商名称'"></u-input>
				</u-form-item>

				<!-- 	<u-form-item v-if="level == 1 || level == 2" :border-bottom="false" class="u-p-l-40 u-p-r-40" label="渠道类型">
					<u-checkbox-group @change="onChannelTypeChange">
						<view class="grid-2">
							<u-checkbox v-for="(item, index) in ChannelTypeList" :key="index" :name="item.value" v-model="item.checked">{{item.label}}</u-checkbox>
						</view>	
					</u-checkbox-group>
				</u-form-item> -->

				<u-form-item v-if="level == 1" :border-bottom="false" class="u-p-l-40 u-p-r-40" label="类型">
					<!-- （1：民用  2：商用  3：民用+商用  4：其他） -->
					<u-checkbox-group @change="onFirstTypeChange">
						<view class="grid-2">
							<u-checkbox  v-model="item.checked" v-for="(item, index) in First_Type_List" :name="item.Key" :key="index">{{ item.Value }}</u-checkbox>
						</view>
					</u-checkbox-group>
				</u-form-item>

				<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" label="经销商状态">
					<u-radio-group v-model="State">
						<view class="grid-2">
							<u-radio name="1">正常</u-radio>
							<u-radio name="99">关停</u-radio>
							<u-radio name="2">全部</u-radio>
						</view>
					</u-radio-group>
				</u-form-item>

				<u-form-item :border-bottom="false" class="u-p-l-40 u-p-r-40" label="维护状态">
					<u-radio-group v-model="DSA_State">
						<view class="grid-2">
							<u-radio name="0">全部</u-radio>
							<u-radio name="1">待维护</u-radio>
							<u-radio name="2">审核中</u-radio>
							<u-radio name="3">已维护</u-radio>
						</view>
					</u-radio-group>
				</u-form-item>

				<view class="btn-group u-flex u-m-t-20">
					<u-button @click="resetSearch" size="medium" type="reset">重置</u-button>
					<u-button @click="onSearchClick" size="medium" :custom-style="{ backgroundColor: '#FF7A23' }" type="warning">搜索</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
export default {
	name: 'dealer-search',
	props: {
		level: {
			type: [Number, String],
			default: 1
		},
		value: {
			type: Object,
			default() {
				return {
					DirectorId: null,
					SalseId: null,
					DealerTerminalId: null,
					TeamId: null,
					DealerName: '',
					State: '1',
					DSA_State: '0',
					ChannelType: '',
					CC_Type: ''
				};
			}
		}
	},
	data() {
		return {
			showSalsePicker: false,
			salseIndex: [-1],
			// 销售经理列表
			SalseList: [],
			showDealerTerminalPicker: false,
			dealerTerminalIndex: [-1],
			// 城市经理列表
			DealerTerminalList: [],
			showDirectorPicker: false,
			directorIndex: [-1],
			// 总监列表
			DirectorList: [],
			showTeamPicker: false,
			teamIndex: [-1],
			// 团队负责人列表
			TeamList: [],

			First_Type_List: [],

			selectedDirector: null,
			selectedSalse: null,
			selectedDealerTerminal: null,
			selectedTeam: null,

			DealerName: '',
			State: '1',
			DSA_State: '0',

			ChannelType: '',
			CC_Type: '',

			// <!-- 1：渠道  2：售后  3：渠道+售后  4：供应商  5：公司  6：其他） -->
			ChannelTypeList: [
				{ label: '渠道', value: 1, checked: false },
				{ label: '售后', value: 2, checked: false },
				{ label: '渠道+售后', value: 3, checked: false },
				{ label: '供应商', value: 4, checked: false },
				{ label: '公司', value: 5, checked: false },
				{ label: '其他', value: 6, checked: false }
			],
			// <!-- （1：民用  2：商用  3：民用+商用  4：其他） -->
			CC_TypeList: [
				{ label: '民用事业部', value: 1, checked: false },
				{ label: '商用事业部', value: 2, checked: false },
				{ label: '德地氏国代', value: 3, checked: false },
				{ label: '供应商', value: 4, checked: false },
				{ label: '办事处', value: 5, checked: false },
				{ label: '公司', value: 6, checked: false },
				{ label: '售后', value: 7, checked: false },
				{ label: '其他', value: 8, checked: false }
			]
		};
	},

	created() {
		if (this.level === 1) {
			this.getDealerList();
		}

		if (this.level == 1) {
			this.State = '1';
			this.DSA_State = '0';
		} else {
			this.State = '1';
			this.DSA_State = '0';
		}

		this.DealerName = this.value.DealerName;
		
		this.getFirstTypeList();
	},

	watch: {
		'value.DealerName'(val) {
			this.DealerName = val;
		}
	},

	methods: {
		
		onFirstTypeChange(e) {
			this.CC_Type = e.toString();
		},
		
		getFirstTypeList() {
			this.$u.api.getFirstTypeList().then(res => {
				this.First_Type_List = res ? res : [];
			});
		},

		onChannelTypeChange(e) {
			this.ChannelType = e.toString();
		},

		getDealerList() {
			this.$u.api
				.getDealerList({
					IsFirst: true,
					Level: 1,
					Pageindex: 0,
					Pagesize: 1
				})
				.then(res => {
					const { ResultCode, SalseList, DealerTerminalList, DirectorList, TeamList } = res;
					if (ResultCode === 1) {
						if (DirectorList) {
							this.DirectorList = DirectorList;
						}

						if (SalseList) {
							this.SalseList = SalseList;
						}

						if (DealerTerminalList) {
							this.DealerTerminalList = DealerTerminalList;
						}

						if (TeamList) {
							this.TeamList = TeamList;
						}

						this.$nextTick(() => {
							this.onIndexChange();
						});
					}
				});
		},

		onInputChange(e) {
			this.DealerName = e;
			this.$emit('input', {
				DirectorId: this.selectedDirector && this.selectedDirector.value,
				SalseId: this.selectedSalse && this.selectedSalse.value,
				DealerTerminalId: this.selectedDealerTerminal && this.selectedDealerTerminal.value,
				TeamId: this.selectedTeam && this.selectedTeam.value,
				DealerName: this.DealerName,
				State: this.State,
				DSA_State: this.DSA_State,
				ChannelType: this.ChannelType,
				CC_Type: this.CC_Type
			});
		},

		onPickerChange(e, key, listKey) {
			if (!e[0].value || !e[0].label) {
				if (this[listKey].length > 0) {
					this[key] = {
						label: this[listKey][0].Value,
						value: this[listKey][0].Key
					};
				} else {
					return false;
				}
			} else {
				this[key] = e[0];
			}

			this.$emit('input', {
				DirectorId: this.selectedDirector && this.selectedDirector.value,
				SalseId: this.selectedSalse && this.selectedSalse.value,
				DealerTerminalId: this.selectedDealerTerminal && this.selectedDealerTerminal.value,
				TeamId: this.selectedTeam && this.selectedTeam.value,
				DealerName: this.DealerName,
				State: this.State,
				DSA_State: this.DSA_State,
				ChannelType: this.ChannelType,
				CC_Type: this.CC_Type
			});

			this.$nextTick(() => {
				this.onIndexChange();
			});
		},

		onIndexChange() {
			this.directorIndex = this.DirectorList.findIndex(item => item.Key == this.value.DirectorId);
			const selectedDirector = this.DirectorList.find(item => item.Key == this.value.DirectorId);
			if (selectedDirector) {
				this.selectedDirector = {
					value: selectedDirector.Key,
					label: selectedDirector.Value
				};
			}

			this.salseIndex = this.SalseList.findIndex(item => item.Key == this.value.SalseId);
			const selectedSalse = this.SalseList.find(item => item.Key == this.value.SalseId);
			if (selectedSalse) {
				this.selectedSalse = {
					value: selectedSalse.Key,
					label: selectedSalse.Value
				};

				this.dealerTerminalIndex = this.DealerTerminalList.findIndex(item => item.Key == this.value.DealerTerminalId);
				const selectedDealerTerminal = this.DealerTerminalList.find(item => item.Key == this.value.DealerTerminalId);
				if (selectedDealerTerminal) {
					this.selectedDealerTerminal = {
						value: selectedDealerTerminal.Key,
						label: selectedDealerTerminal.Value
					};
				}

				this.teamIndex = this.TeamList.findIndex(item => item.Key == this.value.TeamId);
				const selectedTeam = this.TeamList.find(item => item.Key == this.value.TeamId);
				if (selectedTeam) {
					this.selectedTeam = {
						value: selectedTeam.Key,
						label: selectedTeam.Value
					};
				}
			}
		},

		onSearchClick() {
			let channelType = '';
			let ccType = '';
			if (this.level == 1) {
				channelType = this.ChannelType;
				ccType = this.CC_Type;
			}
			if (this.level == 2) {
				channelType = this.ChannelType;
			}

			this.$emit('change', {
				DirectorId: this.selectedDirector && this.selectedDirector.value,
				SalseId: this.selectedSalse && this.selectedSalse.value,
				DealerTerminalId: this.selectedDealerTerminal && this.selectedDealerTerminal.value,
				TeamId: this.selectedTeam && this.selectedTeam.value,
				DealerName: this.DealerName,
				State: this.State,
				DSA_State: this.DSA_State,
				ChannelType: channelType,
				CC_Type: ccType
			});
		},

		resetSearch() {
			let State = '';
			let DSA_State = '';
			if (this.level == 1) {
				State = '1';
				DSA_State = '3';
			} else {
				State = '1';
				DSA_State = '0';
			}

			this.$emit('input', {
				DirectorId: null,
				SalseId: null,
				DealerTerminalId: null,
				TeamId: null,
				DealerName: '',
				State,
				DSA_State,
				ChannelType: '1,3',
				CC_Type: '1,3'
			});

			this.$emit('change', {
				DirectorId: null,
				SalseId: null,
				DealerTerminalId: null,
				TeamId: null,
				DealerName: '',
				State,
				DSA_State,
				ChannelType: '1,3',
				CC_Type: '1,3'
			});
		}
	}
};
</script>

<style lang="scss"></style>
